<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D奖牌在线编辑器</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/controls/OrbitControls.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/exporters/STLExporter.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#F97316',
                        accent: '#10B981',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .editor-panel {
                @apply bg-white rounded-lg shadow-lg p-4 transition-all duration-300 hover:shadow-xl;
            }
            .control-btn {
                @apply bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/50;
            }
            .preset-item {
                @apply cursor-pointer rounded-md overflow-hidden shadow-md transition-all duration-300 hover:shadow-xl hover:scale-105;
            }
            .custom-scrollbar::-webkit-scrollbar {
                @apply w-2;
            }
            .custom-scrollbar::-webkit-scrollbar-track {
                @apply bg-gray-100 rounded-full;
            }
            .custom-scrollbar::-webkit-scrollbar-thumb {
                @apply bg-gray-300 rounded-full hover:bg-gray-400;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-dark">
<!-- 导航栏 -->
<nav class="bg-white shadow-md fixed w-full top-0 z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i class="fa fa-trophy text-secondary text-2xl"></i>
            <h1 class="text-xl font-bold text-dark">3D奖牌编辑器</h1>
        </div>
        <div class="flex items-center space-x-4">
            <button class="hidden md:block control-btn">
                <i class="fa fa-question-circle mr-2"></i>帮助
            </button>
            <button class="hidden md:block control-btn">
                <i class="fa fa-user-circle mr-2"></i>登录
            </button>
            <button class="md:hidden text-dark text-xl">
                <i class="fa fa-bars"></i>
            </button>
        </div>
    </div>
</nav>

<!-- 主要内容区 -->
<main class="container mx-auto pt-24 pb-16 px-4 grid grid-cols-1 lg:grid-cols-4 gap-6">
    <!-- 左侧控制面板 -->
    <div class="lg:col-span-1 space-y-6">
        <!-- 预设奖牌 -->
        <div class="editor-panel">
            <h2 class="text-lg font-semibold mb-4 flex items-center">
                <i class="fa fa-th-large mr-2 text-primary"></i>预设奖牌
            </h2>
            <div class="grid grid-cols-2 gap-3">
                <div class="preset-item" onclick="loadPreset(1)">
                    <img src="https://picsum.photos/seed/medal1/200/150" alt="金牌预设" class="w-full h-24 object-cover">
                    <p class="text-center text-sm mt-1">金牌</p>
                </div>
                <div class="preset-item" onclick="loadPreset(2)">
                    <img src="https://picsum.photos/seed/medal2/200/150" alt="银牌预设" class="w-full h-24 object-cover">
                    <p class="text-center text-sm mt-1">银牌</p>
                </div>
                <div class="preset-item" onclick="loadPreset(3)">
                    <img src="https://picsum.photos/seed/medal3/200/150" alt="铜牌预设" class="w-full h-24 object-cover">
                    <p class="text-center text-sm mt-1">铜牌</p>
                </div>
                <div class="preset-item" onclick="loadPreset(4)">
                    <img src="https://picsum.photos/seed/medal4/200/150" alt="特殊奖牌" class="w-full h-24 object-cover">
                    <p class="text-center text-sm mt-1">特殊</p>
                </div>
            </div>
        </div>

        <!-- 奖牌尺寸 -->
        <div class="editor-panel">
            <h2 class="text-lg font-semibold mb-4 flex items-center">
                <i class="fa fa-arrows-alt mr-2 text-primary"></i>尺寸设置
            </h2>
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">直径 (mm)</label>
                    <input type="range" min="50" max="150" value="80" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" id="diameterSlider">
                    <div class="flex justify-between text-xs text-gray-500 mt-1">
                        <span>50</span>
                        <span id="diameterValue">80</span>
                        <span>150</span>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">厚度 (mm)</label>
                    <input type="range" min="1" max="10" value="3" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" id="thicknessSlider">
                    <div class="flex justify-between text-xs text-gray-500 mt-1">
                        <span>1</span>
                        <span id="thicknessValue">3</span>
                        <span>10</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 奖牌颜色 -->
        <div class="editor-panel">
            <h2 class="text-lg font-semibold mb-4 flex items-center">
                <i class="fa fa-paint-brush mr-2 text-primary"></i>颜色设置
            </h2>
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">主体颜色</label>
                    <div class="grid grid-cols-5 gap-2">
                        <button class="w-8 h-8 rounded-full bg-[#FFD700] border-2 border-white hover:border-gray-300 transition-all" onclick="setMedalColor('#FFD700')"></button>
                        <button class="w-8 h-8 rounded-full bg-[#C0C0C0] border-2 border-white hover:border-gray-300 transition-all" onclick="setMedalColor('#C0C0C0')"></button>
                        <button class="w-8 h-8 rounded-full bg-[#CD7F32] border-2 border-white hover:border-gray-300 transition-all" onclick="setMedalColor('#CD7F32')"></button>
                        <button class="w-8 h-8 rounded-full bg-[#FF4500] border-2 border-white hover:border-gray-300 transition-all" onclick="setMedalColor('#FF4500')"></button>
                        <button class="w-8 h-8 rounded-full bg-[#1E90FF] border-2 border-white hover:border-gray-300 transition-all" onclick="setMedalColor('#1E90FF')"></button>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">文字颜色</label>
                    <div class="grid grid-cols-5 gap-2">
                        <button class="w-8 h-8 rounded-full bg-[#000000] border-2 border-white hover:border-gray-300 transition-all" onclick="setTextColor('#000000')"></button>
                        <button class="w-8 h-8 rounded-full bg-[#FFFFFF] border-2 border-white hover:border-gray-300 transition-all" onclick="setTextColor('#FFFFFF')"></button>
                        <button class="w-8 h-8 rounded-full bg-[#FF0000] border-2 border-white hover:border-gray-300 transition-all" onclick="setTextColor('#FF0000')"></button>
                        <button class="w-8 h-8 rounded-full bg-[#00FF00] border-2 border-white hover:border-gray-300 transition-all" onclick="setTextColor('#00FF00')"></button>
                        <button class="w-8 h-8 rounded-full bg-[#0000FF] border-2 border-white hover:border-gray-300 transition-all" onclick="setTextColor('#0000FF')"></button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 文字设置 -->
        <div class="editor-panel">
            <h2 class="text-lg font-semibold mb-4 flex items-center">
                <i class="fa fa-font mr-2 text-primary"></i>文字设置
            </h2>
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">正面文字</label>
                    <input type="text" id="frontText" placeholder="输入正面文字" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">背面文字</label>
                    <input type="text" id="backText" placeholder="输入背面文字" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">文字大小</label>
                    <input type="range" min="5" max="20" value="10" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" id="textSizeSlider">
                    <div class="flex justify-between text-xs text-gray-500 mt-1">
                        <span>小</span>
                        <span id="textSizeValue">中</span>
                        <span>大</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 右侧预览和操作区 -->
    <div class="lg:col-span-3 space-y-6">
        <!-- 3D预览区 -->
        <div class="editor-panel bg-gray-100 p-0 relative overflow-hidden h-[500px] rounded-lg">
            <div class="absolute top-4 right-4 flex space-x-2 z-10">
                <button class="bg-white/80 hover:bg-white text-dark px-3 py-1 rounded-md shadow-md transition-all" onclick="rotateCamera(0)">
                    <i class="fa fa-eye"></i> 正面
                </button>
                <button class="bg-white/80 hover:bg-white text-dark px-3 py-1 rounded-md shadow-md transition-all" onclick="rotateCamera(1)">
                    <i class="fa fa-refresh"></i> 背面
                </button>
                <button class="bg-white/80 hover:bg-white text-dark px-3 py-1 rounded-md shadow-md transition-all" onclick="rotateCamera(2)">
                    <i class="fa fa-arrows"></i> 自由旋转
                </button>
            </div>
            <div id="previewContainer" class="w-full h-full"></div>
            <div class="absolute bottom-4 left-4 text-sm text-gray-500 bg-white/80 px-3 py-1 rounded-md">
                <i class="fa fa-info-circle mr-1"></i> 鼠标拖动可旋转查看，滚轮可缩放
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="flex flex-wrap gap-4">
            <button class="control-btn flex-1 md:flex-none" onclick="renderMedal()">
                <i class="fa fa-refresh mr-2"></i>更新预览
            </button>
            <button class="bg-secondary hover:bg-secondary/90 text-white px-4 py-2 rounded-md transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-secondary/50 flex-1 md:flex-none" onclick="downloadMedal()">
                <i class="fa fa-download mr-2"></i>下载STL文件
            </button>
            <button class="bg-accent hover:bg-accent/90 text-white px-4 py-2 rounded-md transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-accent/50 flex-1 md:flex-none" onclick="shareMedal()">
                <i class="fa fa-share-alt mr-2"></i>分享设计
            </button>
        </div>

        <!-- 使用指南 -->
        <div class="editor-panel">
            <h2 class="text-lg font-semibold mb-4 flex items-center">
                <i class="fa fa-book mr-2 text-primary"></i>使用指南
            </h2>
            <div class="space-y-3 text-gray-700">
                <div class="flex items-start">
                    <div class="bg-primary/10 rounded-full p-1 mr-3 mt-1">
                        <i class="fa fa-check text-primary"></i>
                    </div>
                    <div>
                        <p class="font-medium">选择预设</p>
                        <p class="text-sm">从预设中选择基础样式，快速开始设计</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="bg-primary/10 rounded-full p-1 mr-3 mt-1">
                        <i class="fa fa-check text-primary"></i>
                    </div>
                    <div>
                        <p class="font-medium">调整参数</p>
                        <p class="text-sm">通过滑块调整奖牌的尺寸、厚度和文字大小</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="bg-primary/10 rounded-full p-1 mr-3 mt-1">
                        <i class="fa fa-check text-primary"></i>
                    </div>
                    <div>
                        <p class="font-medium">自定义设计</p>
                        <p class="text-sm">输入正面和背面文字，选择合适的颜色</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="bg-primary/10 rounded-full p-1 mr-3 mt-1">
                        <i class="fa fa-check text-primary"></i>
                    </div>
                    <div>
                        <p class="font-medium">预览和下载</p>
                        <p class="text-sm">点击更新预览查看效果，满意后下载STL文件用于3D打印</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-dark text-white py-8">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div>
                <div class="flex items-center space-x-2 mb-4">
                    <i class="fa fa-trophy text-secondary text-2xl"></i>
                    <h2 class="text-xl font-bold">3D奖牌编辑器</h2>
                </div>
                <p class="text-gray-400">简单易用的在线3D奖牌设计工具，让您轻松创建个性化奖牌。</p>
                <div class="flex space-x-4 mt-4">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-facebook"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-twitter"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-instagram"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-github"></i>
                    </a>
                </div>
            </div>
            <div>
                <h3 class="text-lg font-semibold mb-4">快速链接</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">使用教程</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                </ul>
            </div>
            <div>
                <h3 class="text-lg font-semibold mb-4">联系我们</h3>
                <ul class="space-y-2">
                    <li class="flex items-center text-gray-400">
                        <i class="fa fa-envelope-o mr-2"></i>
                        <a href="mailto:support@3dmedaleditor.com" class="hover:text-white transition-colors">support@3dmedaleditor.com</a>
                    </li>
                    <li class="flex items-center text-gray-400">
                        <i class="fa fa-phone mr-2"></i>
                        <span>+86 123 4567 8910</span>
                    </li>
                    <li class="flex items-center text-gray-400">
                        <i class="fa fa-map-marker mr-2"></i>
                        <span>北京市海淀区科技园区</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
            <p>&copy; 2025 3D奖牌编辑器. 保留所有权利.</p>
        </div>
    </div>
</footer>

<script>
    // 3D场景初始化
    let scene, camera, renderer, controls, medal, frontTextMesh, backTextMesh;
    let currentView = 2; // 0: 正面, 1: 背面, 2: 自由旋转

    // 初始化3D场景
    function init3DScene() {
        const container = document.getElementById('previewContainer');
        const width = container.clientWidth;
        const height = container.clientHeight;

        // 创建场景
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xf0f0f0);

        // 创建相机
        camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
        camera.position.z = 100;

        // 创建渲染器
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(width, height);
        container.appendChild(renderer.domElement);

        // 添加轨道控制器
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.25;

        // 添加光源
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(1, 1, 1);
        scene.add(directionalLight);

        const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.4);
        directionalLight2.position.set(-1, -1, -1);
        scene.add(directionalLight2);

        // 初始化奖牌
        renderMedal();

        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }
        animate();

        // 监听窗口大小变化
        window.addEventListener('resize', () => {
            const newWidth = container.clientWidth;
            const newHeight = container.clientHeight;

            camera.aspect = newWidth / newHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(newWidth, newHeight);
        });
    }

    // 渲染奖牌
    function renderMedal() {
        // 移除旧的奖牌和文字
        if (medal) scene.remove(medal);
        if (frontTextMesh) scene.remove(frontTextMesh);
        if (backTextMesh) scene.remove(backTextMesh);

        // 获取参数
        const diameter = parseInt(document.getElementById('diameterSlider').value);
        const thickness = parseInt(document.getElementById('thicknessSlider').value);
        const medalColor = document.getElementById('medalColor').value || '#FFD700';
        const textColor = document.getElementById('textColor').value || '#000000';
        const frontText = document.getElementById('frontText').value || '金牌';
        const backText = document.getElementById('backText').value || '2025';
        const textSize = parseInt(document.getElementById('textSizeSlider').value);

        // 更新显示值
        document.getElementById('diameterValue').textContent = diameter + 'mm';
        document.getElementById('thicknessValue').textContent = thickness + 'mm';
        const sizeLabels = ['小', '中', '大'];
        const sizeIndex = Math.floor((textSize - 5) / 5);
        document.getElementById('textSizeValue').textContent = sizeLabels[sizeIndex];

        // 创建奖牌几何体
        const geometry = new THREE.CylinderGeometry(diameter / 2, diameter / 2, thickness, 64);
        const material = new THREE.MeshPhongMaterial({
            color: medalColor,
            shininess: 80,
            specular: 0x111111
        });

        medal = new THREE.Mesh(geometry, material);
        scene.add(medal);

        // 创建文字
        const textOptions = {
            font: new THREE.Font(), // 实际项目中需要加载字体
            size: textSize,
            height: thickness / 3,
            curveSegments: 12,
            bevelEnabled: true,
            bevelThickness: 0.5,
            bevelSize: 0.3,
            bevelOffset: 0,
            bevelSegments: 5
        };

        // 正面文字
        const frontTextGeometry = new THREE.TextGeometry(frontText, textOptions);
        frontTextGeometry.center();
        const frontTextMaterial = new THREE.MeshPhongMaterial({ color: textColor });
        frontTextMesh = new THREE.Mesh(frontTextGeometry, frontTextMaterial);
        frontTextMesh.position.z = thickness / 2 + 0.1; // 稍微偏移以确保显示
        medal.add(frontTextMesh);

        // 背面文字
        const backTextGeometry = new THREE.TextGeometry(backText, textOptions);
        backTextGeometry.center();
        backTextGeometry.rotateY(Math.PI); // 旋转180度
        const backTextMaterial = new THREE.MeshPhongMaterial({ color: textColor });
        backTextMesh = new THREE.Mesh(backTextGeometry, backTextMaterial);
        backTextMesh.position.z = -thickness / 2 - 0.1; // 稍微偏移以确保显示
        medal.add(backTextMesh);

        // 根据当前视图调整相机
        rotateCamera(currentView);
    }

    // 设置奖牌颜色
    function setMedalColor(color) {
        document.getElementById('medalColor').value = color;
        if (medal && medal.material) {
            medal.material.color.set(color);
        }
    }

    // 设置文字颜色
    function setTextColor(color) {
        document.getElementById('textColor').value = color;
        if (frontTextMesh && frontTextMesh.material) {
            frontTextMesh.material.color.set(color);
            backTextMesh.material.color.set(color);
        }
    }

    // 旋转相机查看不同面
    function rotateCamera(view) {
        currentView = view;

        if (view === 0) { // 正面
            controls.reset();
            camera.position.set(0, 0, 100);
            controls.target.set(0, 0, 0);
            controls.enableRotate = false;
        } else if (view === 1) { // 背面
            controls.reset();
            camera.position.set(0, 0, -100);
            controls.target.set(0, 0, 0);
            controls.enableRotate = false;
        } else if (view === 2) { // 自由旋转
            controls.enableRotate = true;
        }
    }

    // 加载预设
    function loadPreset(presetId) {
        switch(presetId) {
            case 1: // 金牌
                document.getElementById('diameterSlider').value = 80;
                document.getElementById('thicknessSlider').value = 3;
                document.getElementById('frontText').value = '金牌';
                document.getElementById('backText').value = '2025';
                document.getElementById('textSizeSlider').value = 10;
                setMedalColor('#FFD700');
                setTextColor('#000000');
                renderMedal();
                break;
            case 2: // 银牌
                document.getElementById('diameterSlider').value = 75;
                document.getElementById('thicknessSlider').value = 2.5;
                document.getElementById('frontText').value = '银牌';
                document.getElementById('backText').value = '2025';
                document.getElementById('textSizeSlider').value = 10;
                setMedalColor('#C0C0C0');
                setTextColor('#000000');
                renderMedal();
                break;
            case 3: // 铜牌
                document.getElementById('diameterSlider').value = 70;
                document.getElementById('thicknessSlider').value = 2;
                document.getElementById('frontText').value = '铜牌';
                document.getElementById('backText').value = '2025';
                document.getElementById('textSizeSlider').value = 9;
                setMedalColor('#CD7F32');
                setTextColor('#000000');
                renderMedal();
                break;
            case 4: // 特殊奖牌
                document.getElementById('diameterSlider').value = 90;
                document.getElementById('thicknessSlider').value = 4;
                document.getElementById('frontText').value = '特等奖';
                document.getElementById('backText').value = '2025年度';
                document.getElementById('textSizeSlider').value = 12;
                setMedalColor('#1E90FF');
                setTextColor('#FFFFFF');
                renderMedal();
                break;
        }
    }

    // 下载STL文件
    function downloadMedal() {
        alert('准备下载STL文件...\n实际项目中，这里会生成并下载3D模型文件。');

        // 实际项目中，使用STLExporter导出模型
        /*
        const exporter = new THREE.STLExporter();
        const stlString = exporter.parse(medal);

        const blob = new Blob([stlString], { type: 'application/octet-stream' });
        const url = URL.createObjectURL(blob);

        const link = document.createElement('a');
        link.href = url;
        link.download = 'medal.stl';
        link.click();

        URL.revokeObjectURL(url);
        */
    }

    // 分享设计
    function shareMedal() {
        alert('分享功能已触发！\n实际项目中，这里会生成分享链接或提供分享选项。');

        // 实际项目中，可能会生成包含当前设计参数的URL
        // 或者调用社交媒体分享API
    }

    // 监听滚动，改变导航栏样式
    window.addEventListener('scroll', () => {
        const navbar = document.getElementById('navbar');
        if (window.scrollY > 10) {
            navbar.classList.add('py-2', 'shadow-lg');
            navbar.classList.remove('py-3', 'shadow-md');
        } else {
            navbar.classList.add('py-3', 'shadow-md');
            navbar.classList.remove('py-2', 'shadow-lg');
        }
    });

    // 初始化滑块事件
    document.getElementById('diameterSlider').addEventListener('input', renderMedal);
    document.getElementById('thicknessSlider').addEventListener('input', renderMedal);
    document.getElementById('textSizeSlider').addEventListener('input', renderMedal);
    document.getElementById('frontText').addEventListener('input', renderMedal);
    document.getElementById('backText').addEventListener('input', renderMedal);

    // 初始化隐藏的颜色输入框
    const medalColorInput = document.createElement('input');
    medalColorInput.type = 'hidden';
    medalColorInput.id = 'medalColor';
    medalColorInput.value = '#FFD700';
    document.body.appendChild(medalColorInput);

    const textColorInput = document.createElement('input');
    textColorInput.type = 'hidden';
    textColorInput.id = 'textColor';
    textColorInput.value = '#000000';
    document.body.appendChild(textColorInput);

    // 页面加载完成后初始化3D场景
    window.addEventListener('load', init3DScene);
</script>
</body>
</html>
